import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
import { Layout, Menu, Typography, ConfigProvider } from 'antd';
import { DatabaseOutlined, ExportOutlined, ApartmentOutlined } from '@ant-design/icons';
import DatabaseConfigPage from './pages/DatabaseConfig';
import SqlExportPage from './pages/SqlExport';

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

const AppContent: React.FC = () => {
  const location = useLocation();

  const getSelectedKeys = () => {
    const currentPath = location.pathname;
    if (currentPath.startsWith('/sqlexport/database-config')) {
      return ['1'];
    }
    if (currentPath.startsWith('/sqlexport/sql-export') || currentPath === '/sqlexport') {
      return ['2'];
    }
    return ['2'];
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{
        padding: '0 24px',
        background: '#fff',
        display: 'flex',
        alignItems: 'center',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ApartmentOutlined style={{ fontSize: '24px', color: 'var(--ant-primary-color)', marginRight: '12px' }} />
          <Title level={4} style={{ margin: 0, lineHeight: 'normal' }}>
            SQL 导出工具
          </Title>
        </div>
      </Header>
      <Layout>
        <Sider 
          width={200} 
          style={{ 
            background: '#fff', 
            borderRight: '1px solid #f0f0f0'
          }}
        >
          <Menu
            mode="inline"
            selectedKeys={getSelectedKeys()}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item key="1" icon={<DatabaseOutlined />}>
              <Link to="/sqlexport/database-config">数据库配置</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<ExportOutlined />}>
              <Link to="/sqlexport/sql-export">SQL导出</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout style={{ padding: '24px' }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: '#fff',
            }}
          >
            <Routes>
              <Route path="/" element={<Navigate to="/sqlexport" replace />} />
              <Route path="/sqlexport/database-config" element={<DatabaseConfigPage />} />
              <Route path="/sqlexport/sql-export" element={<SqlExportPage />} />
              <Route path="/sqlexport" element={<SqlExportPage />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

const App: React.FC = () => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#007bff',
        },
      }}
    >
      <Router>
        <AppContent />
      </Router>
    </ConfigProvider>
  );
};

export default App;
